<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5-6 Bootstrap组件-导航</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <script src="jquery/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>

</head>
<body>

<!--以一个带有class .nav的无序列表开始-->

<h5>.nav-tabs代表可切换的导航</h5>
<ul class="nav nav-tabs">
    <li class="active"><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
</ul>

<h5>.nav-pills代表胶囊导航</h5>
<ul class="nav nav-pills">
    <li class="active"><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
</ul>

<h5>.nav-justified使导航垂直</h5>
<ul class="nav nav-justified">
    <li class="active"><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
    <li><a href="http://www.imooc.com">慕课网</a></li>
</ul>



</body>
</html>
